import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Link } from 'react-router-dom';

import {
  CCloseButton,
  CSidebar,
  CSidebarBrand,
  CSidebarFooter,
  CSidebarHeader,
  CSidebarToggler,
  CNavItem,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'

import { AppSidebarNav } from './AppSidebarNav'

import { logo } from 'src/assets/brand/logo'
import { sygnet } from 'src/assets/brand/sygnet'


const AppSidebar = () => {
  const dispatch = useDispatch()
  const unfoldable = useSelector((state) => state.sidebarUnfoldable)
  const sidebarShow = useSelector((state) => state.sidebarShow)
  const role = useSelector((state) => state.role)

  // const role = 'hr';

  const adminNav = [
    {
      component: CNavItem,
      name: 'Добавить сотрудника',
      to: '/add_employee',
    },
    {
      component: CNavItem,
      name: 'Удалить сотрудника',
      to: '/remove_employee',
    },
  ]
  
  
  const doctorNav = [
    {
      component: CNavItem,
      name: 'Посмотреть расписание',
      to: '/doctor_schedule',
    },
    {
      component: CNavItem,
      name: 'Буду отсутствовать',
      to: '/doctor_absent',
    },
  ];
  
  const hrNav = [
    {
      component: CNavItem,
      name: 'Информация по врачу',
      to: '/doctor_info',
    },
    {
      component: CNavItem,
      name: 'Добавление кадровых данных',
      to: '/add_doctor',
    },
    {
      component: CNavItem,
      name: 'Управление врачами',
      to: '/doctor_manage',
    },
    {
      component: CNavItem,
      name: 'Сформировать расписание',
      to: '/schedule_hr',
    },
    {
      component: CNavItem,
      name: 'Состав специалистов',
      to: '/list_of_doctors',  
    },
  ];
  
  const bossNav = [
    {
      component: CNavItem,
      name: 'Информация по врачу',
      to: '/doctor_info',
    },
    {
      component: CNavItem,
      name: 'Добавление кадровых данных',
      to: '/add_doctor',
    },
    {
      component: CNavItem,
      name: 'Управление врачами',
      to: '/doctor_manage',
    },
    {
      component: CNavItem,
      name: 'Статистика',
      to: '/statistics',
    },
    {
      component: CNavItem,
      name: 'Сформировать прогноз',
      to: '/forecast',
    },
    {
      component: CNavItem,
      name: 'Факт-прогноз',
      to: '/statistics_forecast',
    },
    {
      component: CNavItem,
      name: 'Почасовой прогноз',
      to: '/hour_forecast',
    },
    {
      component: CNavItem,
      name: 'Сформировать расписание',
      to: '/schedule_boss',
    },
    {
      component: CNavItem,
      name: 'Расписание по врачам',
      to: '/schedule_of_doctors',
    },
    {
      component: CNavItem,
      name: 'Расписание по модальностям',
      to: '/schedule_of_doctors_by_modality',
    },
    {
      component: CNavItem,
      name: 'Состав специалистов',
      to: '/list_of_doctors',  
    },
    {
      component: CNavItem,
      name: 'Буду отсутствовать',
      to: '/boss_absent',  
    },
  ];
  
  
  
  let navigation;
  switch (role) {
    case 'admin':
      navigation = adminNav;
      break;
    case 'doctor':
      navigation = doctorNav;
      break;
    case 'hr':
      navigation = hrNav;
      break;
    case 'boss':
      navigation = bossNav;
      break;
  }


  return (
    <CSidebar
      className="border-end"
      colorScheme="dark"
      position="fixed"
      unfoldable={unfoldable}
      visible={sidebarShow}
      onVisibleChange={(visible) => {
        dispatch({ type: 'set', sidebarShow: visible })
      }}
    >
      <CSidebarHeader className="border-bottom">
        <CSidebarBrand to="/">
          <Link to="/first_page" style={{ textDecoration: 'none', color: 'inherit' }}>
            <h5>Kola Team</h5>
        </Link>
        </CSidebarBrand>
        <CCloseButton
          className="d-lg-none"
          dark
          onClick={() => dispatch({ type: 'set', sidebarShow: false })}
        />
      </CSidebarHeader>
      <AppSidebarNav items={navigation} />
      <CSidebarFooter className="border-top d-none d-lg-flex">
        <CSidebarToggler
          onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
        />
      </CSidebarFooter>
    </CSidebar>
  )
}

export default React.memo(AppSidebar)
